<template>
  <div class="extend-demo">
    <h3 class="title">原生样式</h3>
    <h5 class="sub-title">颜色</h5>
    <div>
      <span class="primary-color">主色系</span>
      <span class="green-color">绿色</span>
      <span class="yellow-color">黄色</span>
      <span class="red-color">红色</span>
      <span class="blue-color">蓝色</span>
    </div>
    <div>
      <span class="dark-color">暗黑</span>
      <span class="gray-color">灰色</span>
      <span class="gray2-color">灰2</span>
      <span class="gray3-color">灰3</span>
      <span class="gray4-color">灰4</span>
      <span class="gray5-color">灰5</span>
    </div>
    <div>
      <span class="bg-primary-color white-color">背景主色系</span>
      <span class="bg-green-color white-color">背景绿色</span>
      <span class="bg-yellow-color white-color">背景黄色</span>
      <span class="bg-red-color white-color">背景红色</span>
      <span class="bg-blue-color white-color">背景蓝色</span>
    </div>
    <div>
      <span class="bg-dark-color white-color">背景暗黑</span>
      <span class="bg-gray-color white-color">背景灰色</span>
      <span class="bg-gray2-color white-color">背景灰2</span>
      <span class="bg-gray3-color">背景灰3</span>
      <span class="bg-gray4-color">背景灰4</span>
      <span class="bg-gray5-color">背景灰5</span>
    </div>
    <h5 class="sub-title">通用调用</h5>
    <div>
      <span class="text-hover">可点击文本</span>
      <span class="dark-text-hover">灰色可点击文本</span>
      <span class="link">链接式文本</span>
      <span class="float-right">右浮动文本</span>
    </div>
    <h5 class="sub-title">垂直居中对齐</h5>
    <div v-height="100" class="relative">
      <i class="middle-right" style="margin-right: 5px;">
        <i class="d-icon-right"></i>
      </i>
      <div class="middle-center">垂直居中对齐</div>
    </div>
    <h5 class="sub-title">超出内容省略</h5>
    <div class="text-ellipsis" v-width="100">超出内容省略超出内容省略</div>
    <h5 class="sub-title">对齐方式</h5>
    <div>
      <div class="text-left">左对齐</div>
      <div class="text-center">居中对齐</div>
      <div class="text-right">右对齐</div>
    </div>
    <h5 class="sub-title">边框底线</h5>
    <div class="bottom-line"></div>

    <h3 class="title">Directive 样式</h3>
    <h5 class="sub-title">颜色</h5>
    <div>
      <span v-color:primary>主色系</span>
      <span v-color:green>绿色</span>
      <span v-color:yellow>黄色</span>
      <span v-color:red>红色</span>
      <span v-color:blue>蓝色</span>
    </div>
    <div>
      <span v-color:dark>暗黑</span>
      <span v-color:gray>灰色</span>
      <span v-color:gray2>灰2</span>
      <span v-color:gray3>灰3</span>
      <span v-color:gray4>灰4</span>
      <span v-color:gray5>灰5</span>
    </div>
    <div>
      <span v-bg-color:primary v-color:white>背景主色系</span>
      <span v-bg-color:green v-color:white>背景绿色</span>
      <span v-bg-color:yellow v-color:white>背景黄色</span>
      <span v-bg-color:red v-color:white>背景红色</span>
      <span v-bg-color:blue v-color:white>背景蓝色</span>
    </div>
    <div>
      <span v-bg-color:dark v-color:white>背景暗黑</span>
      <span v-bg-color:gray v-color:white>背景灰色</span>
      <span v-bg-color:gray2 v-color:white>背景灰2</span>
      <span v-bg-color:gray3>背景灰3</span>
      <span v-bg-color:gray4>背景灰4</span>
      <span v-bg-color:gray5>背景灰5</span>
    </div>
    <h5 class="sub-title">自定义颜色</h5>
    <div>
      <span v-bg-color:#ff49e9 v-color:white>背景自定义</span>
      <span v-color="'#ff49e9'">自定义颜色</span>
    </div>
    <h5 class="sub-title">字体大小</h5>
    <div>
      <div v-font="18">18px</div>
      <div v-font="16">16px</div>
      <div v-font="14">14px</div>
      <div v-font="12">12px</div>
    </div>
    <h5 class="sub-title">高度，宽度，padding，margin</h5>
    <div v-height="30" v-bg-color:gray2>高度30px</div>
    <div v-width="100" v-bg-color:gray1>宽度100px</div>
    <div v-padding="30" v-bg-color:gray2>padding30px</div>
    <div v-margin="30" v-bg-color:gray2>margin30px</div>
  </div>
</template>

<script>
export default {
  name: 'extendDemo',
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
.extend-demo
  span
    margin-right 5px
</style>
